<template>
    <div class="enterprise_step3">
        <el-form ref="formRef" :rules="rules" :model="form" scroll-to-error label-width="auto">
            <el-row>
                <el-col class="mb18">商户信息</el-col>
                <el-col :span="12">
                    <el-form-item class="custom_form_item" label="商户简称" prop="merchantShortName">
                        <el-input v-model.trim="form.merchantShortName" maxlength="20" show-word-limit />
                        <div class="desc">*在支付完成页向买家展示</div>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item class="custom_form_item" label="客服电话" prop="servicePhone">
                        <el-input v-model.trim="form.servicePhone" maxlength="20" show-word-limit />
                        <div class="desc">*将在交易记录中向买家展示，请确保电话畅通以便平台回拨确认</div>
                    </el-form-item>
                </el-col>

                <el-col :span="12">
                    <el-form-item class="custom_form_item" label="经营类目" prop="business">
                        <el-select
                            v-model="form.business"
                            @visible-change="selectVisibleChangeHandle"
                            placeholder="请选择经营类目">
                            <el-option
                                v-for="item in businessOptions"
                                :key="item.value"
                                :label="item.name"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item class="custom_form_item" label="实际经营地址" prop="addressInfo.address">
                        <div class="address">
                            <div class="address_select">
                                <el-form-item prop="addressInfo.provinceCode" label-width="0">
                                    <el-select
                                        v-model="form.addressInfo.provinceCode"
                                        @change="provinceChangeHandle"
                                        placeholder="请选择省">
                                        <el-option
                                            v-for="item in provinceOptions"
                                            :key="item.code"
                                            :label="item.name"
                                            :value="item.code" />
                                    </el-select>
                                </el-form-item>
                                <el-form-item prop="addressInfo.cityCode" label-width="0">
                                    <el-select
                                        v-model="form.addressInfo.cityCode"
                                        @change="cityChangeHandle"
                                        placeholder="请选择市"
                                        no-data-text="请选择省">
                                        <el-option
                                            v-for="item in cityOptions"
                                            :key="item.code"
                                            :label="item.name"
                                            :value="item.code" />
                                    </el-select>
                                </el-form-item>
                                <el-form-item prop="addressInfo.districtCode" label-width="0">
                                    <el-select
                                        v-model="form.addressInfo.districtCode"
                                        placeholder="请选择区"
                                        no-data-text="请选择市">
                                        <el-option
                                            v-for="item in districtOptions"
                                            :key="item.code"
                                            :label="item.name"
                                            :value="item.code" />
                                    </el-select>
                                </el-form-item>
                            </div>
                            <el-input
                                v-model.trim="form.addressInfo.address"
                                type="textarea"
                                placeholder="填写详细地址"
                                :rows="6"
                                resize="none"
                                maxlength="40"
                                show-word-limit />
                        </div>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item class="custom_form_item" label="商户证件类型" prop="businessLicenseType">
                        <el-select v-model="form.businessLicenseType" placeholder="营业执照">
                            <el-option v-for="item in merchantCertificateTypeOptions" :key="item.value" v-bind="item" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item class="custom_form_item" label="统一社会信用代码" prop="businessLicense">
                        <el-input v-model.trim="form.businessLicense" maxlength="20" show-word-limit />
                    </el-form-item>
                </el-col>
                <el-col class="mb18 mt18">结算账户信息</el-col>
                <template v-if="props.query.bindAccountType == 1">
                    <el-col :span="12">
                        <el-form-item class="custom_form_item" label="开户银行" prop="bankBranchName">
                            <el-input v-model.trim="form.bankBranchName" maxlength="20" show-word-limit />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item class="custom_form_item" label="开户名称" prop="cardName">
                            <el-input v-model.trim="form.cardName" maxlength="50" show-word-limit />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item class="custom_form_item" label="企业对公账号" prop="cardNo">
                            <el-input v-model.trim="form.cardNo" maxlength="20" show-word-limit />
                        </el-form-item>
                    </el-col>
                </template>

                <template v-if="props.query.bindAccountType == 2">
                    <el-col :span="12">
                        <el-form-item class="custom_form_item" label="开户银行" prop="bankBranchName">
                            <el-input v-model.trim="form.bankBranchName" maxlength="20" show-word-limit />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item class="custom_form_item" label="持卡人姓名" prop="cardName">
                            <el-input v-model.trim="form.cardName" maxlength="20" show-word-limit />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item class="custom_form_item" label="银行卡号" prop="cardNo">
                            <el-input v-model.trim="form.cardNo" maxlength="20" show-word-limit />
                        </el-form-item>
                    </el-col>
                </template>
            </el-row>
            <div class="footer">
                <el-button @click="submitHandle" type="primary">申请报备</el-button>
            </div>
        </el-form>
    </div>
</template>
<script setup>
import provinceOptions from '@/assets/json/city.json';
import constants from '@/commons/constants';
import { getRegExp, humpToUnderline, isArray, packSelectObjUtil, throttle } from '@/commons/utils';
import request from '@/request';
import { ElLoading, ElMessage } from 'element-plus';
import { reactive, ref } from 'vue';

const props = defineProps({
    query: { type: Object, default: () => ({}) }
});
const emit = defineEmits(['stepChange']);
const merchantCertificateTypeOptions = packSelectObjUtil(constants.MERCHANT_CERTIFICATE_TYPE, false);
const formRef = ref(null);
const form = reactive({
    shopId: props.query.shopId,
    //商户简称 该名称是显示给消费者看的商户名称 1
    merchantShortName: '',
    //经营类目 1
    business: void 0,
    //商户证件类型 	例如：NATIONAL_LEGA，详见：证件类型1
    businessLicenseType: 'NATIONAL_LEGAL',
    //银行开户行名称 1
    bankBranchName: '',
    //银行卡号 1
    cardNo: '',
    //客服电话 方便银联在必要时能联系上商家1
    servicePhone: '',
    //{“provinceCode”: “510000”,”cityCode”: “510800”,”districtCode”: “510812”,”address”: “地址” }
    addressInfo: {
        provinceCode: void 0,
        cityCode: void 0,
        districtCode: void 0,
        address: ''
    },
    //商户证件编号 商户证件号码 1
    businessLicense: '',
    //银行持卡人姓名 1
    cardName: '',
    //登录号
    loginNo: ''
});
const rules = {
    merchantShortName: [{ required: true, message: '请输入商户简称', trigger: 'blur' }],
    business: [{ required: true, message: '请输入经营类目', trigger: 'change' }],
    businessLicenseType: [{ required: true, message: '请选择户证件类型', trigger: 'blur' }],
    bankBranchName: [
        { required: true, message: '请输入开户银行', trigger: 'blur' },
        { pattern: getRegExp('chinese'), message: '只能输入中文', trigger: 'blur' }
    ],
    cardName: [{ required: true, message: '请输入开户名称', trigger: 'blur' }],
    cardNo: [
        { required: true, message: '请输入企业对公账号', trigger: 'blur' },
        { pattern: getRegExp('bankcard'), message: '银行卡号格式不正确', trigger: 'blur' }
    ],
    servicePhone: [{ required: true, message: '请输入客服电话', trigger: 'blur' }],
    addressInfo: {
        provinceCode: [{ required: true, message: '请选择省', trigger: 'change' }],
        cityCode: [{ required: true, message: '请选择市', trigger: 'change' }],
        districtCode: [{ required: true, message: '请选择区', trigger: 'change' }],
        address: [{ required: true, message: '请输入详细地址', trigger: 'blur' }]
    },
    businessLicense: [
        { required: true, message: '请输入统一社会信用代码', trigger: 'blur' },
        { pattern: getRegExp('creditCode'), message: '统一社会信用代码格式不正确', trigger: 'blur' }
    ]
};
// 自动填充
const autoFillHandle = query => {
    if (query.bindAccountType == 1) {
        //对公卡
        form.cardNo = query.cardNo;
        form.bankBranchName = query.bankName;
        form.cardName = query.cardName;
    } else {
        // 对私卡
        form.cardNo = query.cardNo;
        form.bankBranchName = query.bankName;
        form.cardName = query.operatorName;
    }
    form.businessLicense = query.regNo;
    form.loginNo = query.loginNo;
};
autoFillHandle(props.query);
// 市列表
const cityOptions = ref([]);
// 区列表
const districtOptions = ref([]);
// 类目列表
const businessOptions = ref([]);
// 选择省
const provinceChangeHandle = v => {
    cityOptions.value = provinceOptions.find(item => item.code === v).children;
    form.addressInfo.cityCode = void 0;
    form.addressInfo.districtCode = void 0;
};
// 选择市
const cityChangeHandle = v => {
    districtOptions.value = cityOptions.value.find(item => item.code === v).children;
    form.addressInfo.districtCode = void 0;
};
// 获取经营类目
const selectVisibleChangeHandle = async visible => {
    if (visible && businessOptions.value.length === 0) {
        const { data } = await request('baofuEntCategory');
        businessOptions.value = isArray(data) ? data : [];
    }
};
selectVisibleChangeHandle(true);
// 申请报备
const submitHandle = throttle(async () => {
    await formRef.value.validate();
    const loading = ElLoading.service({
        lock: true,
        text: '申请报备中',
        background: 'rgba(0, 0, 0, 0.7)'
    });
    const { code, msg } = await request('baofuReport', form);
    if (code === 0) {
        emit('stepChange');
    } else {
        ElMessage.error(msg);
    }
    loading.close();
}, 1000);
</script>
<style lang="scss">
.enterprise_step3 {
    margin-top: 25px;
    .custom_form_item {
        .el-input,
        .el-textarea,
        .el-input__wrapper {
            // width: 90%;
            max-width: 460px;
        }
    }
    .el-form {
        display: flex;
        flex-direction: column;
        min-height: calc(100vh - 315px);
        .el-row {
            flex: 1;
        }

        .address {
            display: grid;
            width: 100%;
            max-width: 460px;
            .address_select {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                column-gap: 8px;
                margin-bottom: 18px;
            }
        }
        .footer {
            margin: 30px 0;
            text-align: center;
        }
    }
    .desc {
        width: 100%;
        margin-top: 8px;
        font-size: 12px;
        line-height: 17px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #999999;
    }
}
</style>
